<template>
  <div>
    <el-table
      :data="tableData"
      border
      :row-key="rowkey"
      :expand-row-keys="tableRow_keys"
      style="width: 100%"
      @selection-change="e=>$emit('selection-change',e)"
    >
      <!--是否需要多选-->
      <template v-if="selection">
        <el-table-column type="selection" width="55"> </el-table-column>
      </template>

      <!--是否需要展示行-->
        <el-table-column v-if="expand" type="expand">
          <template  slot-scope="props">
            <slot name="expand" :row="{ ...props.row}"></slot>
          </template>
        </el-table-column>
      
       
      <el-table-column
        v-for="(v, k) in tablePrps"
        :key="k"
        :prop="v.key"
        :label="v.label"
      >
        <template slot-scope="props">
          <!--需要自定义展示的字段-->
          <template v-if="v.diy_show">
            <slot name="diy_column" :row="{ ...props.row, key: v.key }"></slot>
          </template>
          <!--常规字段-->
          <template v-else>
            {{ props.row[`${v.key}`] }}
          </template>
        </template>
      </el-table-column> 
     
      <el-table-column
        v-if="operation"
        fixed="right"
        label="操作"
        :width="fixed_width"
      >
        <template slot-scope="props">
          <slot name="diy_fixed" :row="{ ...props.row }"></slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    //表格标题以及数据对应字段
    tablePrps: {
      type: Array,
      default: () => [],
    },
    //数据
    tableData: {
      type: Array,
      default: () => [],
    },
    //是否需要右侧操作栏
    operation: {
      type: Boolean,
      default: true,
    },
    //右侧操作栏的宽度
    fixed_width: {
      type: String,
      default: "200",
    },
    // 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的keys数组
    tableRow_keys: {
      type: Array,
      default: () => [],
    },
    //搭配上面属性使用
    rowkey: {
      type: String,
      default: "id",
    },
    //是否多选
    selection:{
        type:Boolean,
        default:false
    },
    //是否展示行
    expand:{
        type:Boolean,
        default:false
    },
    
  },
};
</script>

<style>
</style>